<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <script  src="http://localhost:8080/siyuan/resources/Timetables.min.js"></script>
 <title>大学课表</title>
    <style>
        #coursesTable {
            padding: 15px 10px;
        }

        .Courses-head {
            background-color: #edffff;
        }

        .Courses-head > div {
            text-align: center;
            font-size: 14px;
            line-height: 28px;
        }

        .left-hand-TextDom, .Courses-head {
            background-color: #f2f6f7;
        }

        .Courses-leftHand {
            background-color: #f2f6f7;
            font-size: 12px;
        }

        .Courses-leftHand .left-hand-index {
            color: #9c9c9c;
            margin-bottom: 4px !important;
        }

        .Courses-leftHand .left-hand-name {
            color: #666;
        }

        .Courses-leftHand p {
            text-align: center;
            font-weight: 900;
        }

        .Courses-head > div {
            border-left: none !important;
        }

        .Courses-leftHand > div {
            padding-top: 5px;
            border-bottom: 1px dashed rgb(219, 219, 219);
        }

        .Courses-leftHand > div:last-child {
            border-bottom: none !important;
        }

        .left-hand-TextDom, .Courses-head {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        }

        .Courses-content > ul {
            border-bottom: 1px dashed rgb(219, 219, 219);
            box-sizing: border-box;
        }

        .Courses-content > ul:last-child {
            border-bottom: none !important;
        }

        .highlight-week {
            color: #02a9f5 !important;
        }

        .Courses-content li {
            text-align: center;
            color: #666666;
            font-size: 14px;
            line-height: 50px;
        }

        .Courses-content li span {
            padding: 6px 2px;
            box-sizing: border-box;
            line-height: 18px;
            border-radius: 4px;
            white-space: normal;
            word-break: break-all;
            cursor: pointer;
        }
        .grid-active {
            z-index: 9999;
        }
        .grid-active span {
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        }
    </style>




</head>


<body>




	<h1>
		<a href="/siyuan/logout.shtml">退出</a>
	</h1>
	
	<h1>
		<a href="/siyuan/home.shtml">HOME</a>
	</h1>

<div id="coursesTable"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    let courseListData=[]
    $.ajax({
        url: 'http://localhost:8080/siyuan/teacher_course.shtml',
        type: 'get',
        dataType: 'json',
        timeout: 1000,
        async:false,
        success: function (data, status) {
            
            courseListData=data
            console.log(courseListData)
        },
        fail: function (err, status) {
            console.log(err)
        }
    })
    let mondayArr=['','','','','','','','','','']
    let tuesdayArr=['','','','','','','','','','']
    let wednesdayArr=['','','','','','','','','','']
    let thursdayArr=['','','','','','','','','','']
    let fridayArr=['','','','','','','','','','']
    let dataMap=[mondayArr,tuesdayArr,wednesdayArr,thursdayArr,fridayArr]
    courseListData.map((value,key,arr) => {
    	 switch (value.day) {
         case '周一':
         for (let i = 0; i < mondayArr.length; i++) {
             if (value.time==(i+8)) {
                 mondayArr[i]=value.name+"("+value.classroom+")"
             }
         }
         break;
         case '周二':
         for (let i = 0; i < tuesdayArr.length; i++) {
             if (value.time==(i+8)) {
                 tuesdayArr[i]=value.name+"("+value.classroom+")"
             }
         }
         break;
         case '周三':
         for (let i = 0; i < wednesdayArr.length; i++) {
             if (value.time==(i+8)) {
                 wednesdayArr[i]=value.name+"("+value.classroom+")"
             }
         }
         break;
         case '周四':
         for (let i = 0; i < thursdayArr.length; i++) {
             if (value.time==(i+8)) {
                 thursdayArr[i]=value.name+"("+value.classroom+")"
             }
         }
         break;
         case '周五':
         for (let i = 0; i < fridayArr.length; i++) {
             if (value.time==(i+8)) {
                 fridayArr[i]=value.name+"("+value.classroom+")"
             }
         }
         break;
         default:
         break;
        }
    })

    let courseList=dataMap
    let week =['周一', '周二', '周三', '周四', '周五']
    let day = new Date().getDay();
    let courseType = [
        [{index: '1', name: '8:00'}, 1],
        [{index: '2', name: '9:00'}, 1],
        [{index: '3', name: '10:00'}, 1],
        [{index: '4', name: '11:00'}, 1],
        [{index: '5', name: '13:00'}, 1],
        [{index: '6', name: '14:00'}, 1],
        [{index: '7', name: '15:00'}, 1],
        [{index: '8', name: '16:00'}, 1],
        [{index: '9', name: '17:00'}, 1],
        [{index: '10', name: '18:00'}, 1]
    ];
    // 实例化(初始化课表)
    let Timetable = new Timetables({
        el: '#coursesTable',
        timetables: courseList,
        week: week,
        timetableType: courseType,
        highlightWeek: day,
        gridOnClick: function (e) {
            alert(e.name + '  ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节');
            console.log(e);
        },
        styles: {
            Gheight: 50
        }
    });

</script>











</body>
</html>